
<html lang="zh">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style-type: none;
        }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>YXB</title>
    <link rel="styleSheet" href="" type="text/css">
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<h2>javascript 和 jquery  实现滑动方式代码量 对比</h2>

<button id="button_both" style="height: 35px;">一起滑动...</button>

<p>---------------------------------------------------------------------------</p>


<button id="button1" style="height: 50px;">box1 slide </button>

<div>
    <div id="box1" style="width: 200px; height: 100px; background-color:red; position:absolute; ">box1   jquery</div>
</div>

<div style="height: 130px;"></div>


<hr>
<button id="button2" style="height: 30px;">box2 slide...</button>
<div>
    <div id="box2" style="width: 200px; height: 100px; background-color:red; position:absolute; ">box2</div>
</div>


</body>
<script type="text/javascript">

    document.getElementById("button_both").addEventListener("click", function(){
        box2_slide_javascript();
        box1_slide_jquery();
    });

/*============================================================================================================*/


    $("#button1").click(function () {
        box1_slide_jquery();
    });

    /*   jquery 代码量         */
    function box1_slide_jquery() {
        $("#box1").animate({left: '800px'});
    }


/*============================================================================================================*/



    document.getElementById("button2").onclick = function () {    // 鼠标进来触发
        box2_slide_javascript();
    };


    /*   JavaScript 代码量     */
    var timer = null;
    var box2 = document.getElementById("box2");
    function box2_slide_javascript() {
        clearInterval(timer);   // 清除所有的定时器 去掉有bug
        timer = setInterval(function () {
            if (box2.offsetLeft > 800) {   // 判断是否到了指定的位置,停止移动
                clearInterval(timer);       // 停止移动
            } else {
                box2.style.left = box2.offsetLeft + 10 + "px";   // xxx px
            }
        }, 1);// xxx 毫秒
    }



</script>
</html>

